<template>
    <div>
        <h3>公告显示</h3>
        <div>
            关键字:
            <input type="text" v-model="fenye.Gname">
            公告类型:
            <select v-model="fenye.leix">
                     <option value="">请选择</option>
                     <option :value="item.id" v-for="item in data1.list">{{ item.xname }}</option>
             </select>
             <input type="button" value="查询" class="btn btn-primary" @click="getlist">
             <input type="button" value="批量删除" class="btn btn-primary" @click="san">
        </div>
        <input type="button" value="添加" class="btn btn-primary" @click="ok">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>
                        <input type="checkbox" v-model="cheackall" @click="checkone">
                    </td>
                    <td>id</td>
                    <td>标题</td>
                    <td>状态</td>
                    <td>类型</td>
                    <td>发布时间</td>
                    <td>公告照片</td>
                    <td>公告内容</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list">
                    <td>
                        <input type="checkbox" v-model="dis" :value="item.id" @click="checktwo">
                    </td>
                    <td>{{ item.id }}</td>
                    <td>{{ item.gname }}</td>
                    <td>{{ item.steat==1?"显示":"隐藏" }}</td>
                    <td>
                        <span v-if="item.leix==1">黑色</span>
                        <span v-if="item.leix==2">白色</span>
                        <span v-if="item.leix==3">蓝色</span>
                        <span v-if="item.leix==4">黄色</span>
                    </td>
                    <td>{{moment(item.fenye).format("YYYY-MM-SS HH:mm:ss")}}</td>
                    <td><img :src="item.tu" width="100" height="100" alt="" ></td>
                    <td>{{ item.neirong }}</td>
                    <td>
                        <input type="button" value="删除" class="btn btn-primary" @click="shaanchu(item.id)">
                        <input type="button" value="修改" class="btn btn-primary" @click="xiug(item.id)">
                    </td>
                </tr>
            </tbody>
        </table>
        <!-- 考试结束 -->
    </div>
    <div>
        <span>共{{data.tpagee}}页</span>
        <span>共{{data.tcount}}条</span>
        <span>共{{fenye.pageindex}}/{{data.tpagee}}页</span>
        <input type="button" value="首页" class="btn btn-primary" @click="gost(1)">
        <input type="button" value="下一页" class="btn btn-primary" @click="gost(fenye.pageindex+1)">
        <input type="button" value="上一页" class="btn btn-primary" @click="gost(fenye.pageindex-1)">
        <input type="button" value="尾页" class="btn btn-primary" @click="gost(data.tpagee)">
    </div>
</template>

<script setup lang="ts">
import {ref,reactive, onMounted} from 'vue'
import axios from 'axios';
import {useRoute,useRouter} from 'vue-router'
import moment from 'moment';
const route=useRoute();
const router=useRouter();
const ok=()=>{
    router.push({
        path:'/Gaddd'
    })
}


let fenye=reactive({
    pageindex:1,
    pagesize:2,
    Gname:'',
    leix:''
})
//显示
const data:any=reactive({
    list:[],
    tcount:0,
    tpagee:0
})
onMounted(()=>{
    getlist();
})
const getlist=()=>{
    axios({
        url:'/api/gong/gshow',
        method:'get',
        params:fenye
    })
    .then((res)=>{
        console.log(res);
        data.list=res.data.list;
        data.tcount=res.data.tcount;
        data.tpagee=res.data.tpagee;
    })
    .catch((err)=>{
        console.log(err);
    })
}
//下拉框
const data1:any=reactive({
    list:[]
})
onMounted(()=>{
    getlist1();
})
const getlist1=()=>{
    axios({

        url:'/api/gong/xshow',
        method:'get',
    })
    .then((res)=>{
        console.log(res);
        data1.list=res.data;
    })
    .catch((err)=>{
        console.log(err);
    })
}
const gost=(num:any)=>{
    if(num<1)
    {
        fenye.pageindex=1;
        return;
    }
    if(num>data.tpagee)
    {
        fenye.pageindex=data.tpagee;
        return;
    }
    fenye.pageindex=num;
    getlist();
}
//删除
const shaanchu=(id:any)=>{
let f=confirm('确定删除吗?')
if(f==true)
    axios({
        url:'/api/gong/shanchu',
        method:'delete',
        params:{
            id:id
        }
        })
        .then((res)=>{
            console.log(res);
            if(res.data>0)
        {
            alert('删除成功');
            getlist();
        }
        else
        {
            alert('删除失败');
            return;
        }
        })

        .catch((err)=>{
            console.log(err);
        })
}
//修改
const xiug=(id:any)=>{

    router.push({
        path:'Update',
        query:{

            id:id
        }
    })
}
let cheackall=ref(false);
let dis=ref([]);
const checkone=()=>{
    cheackall.value=!cheackall.value;
    if(cheackall.value==true){
        dis.value=data.list.map((item:any)=>{
            return item.id;
        })
    }
    else
    {
        dis.value=[];
    }
}
const checktwo=()=>{
    if(dis.value.length=data.list.length)
    {
        cheackall.value=true;
    }
    else
    {
        cheackall.value==false;
    }
}
const san=(id:any)=>{
    let f=confirm('确定删除吗?')
if(f==true)
    axios({
        url:'/api/gong/shanchu',
        method:'delete',
        params:{
            id:dis.value.toString()
        }
        })
        .then((res)=>{
            console.log(res);
            if(res.data>0)
        {
            alert('删除成功');
            getlist();
        }
        else
        {
            alert('删除失败');
            return;
        }
        })

        .catch((err)=>{
            console.log(err);
        })
}
</script>

<style scoped>

</style>    